<template>
  <div 
    class="compass-component"
    :class="[
      `compass-${componentData.props.compassStyle || 'classic'}`,
      { 'show-labels': componentData.props.showLabels }
    ]"
    :style="compassStyle"
  >
    <div class="compass-container">
      <!-- 指北针主体 -->
      <div class="compass-main">
        <div class="compass-arrow" :style="{ transform: `rotate(${rotation}deg)` }">
          <div class="arrow-north">N</div>
          <div class="arrow-south">S</div>
        </div>
        
        <!-- 方向标记 -->
        <div class="direction-markers">
          <div class="marker marker-north">N</div>
          <div class="marker marker-east">E</div>
          <div class="marker marker-south">S</div>
          <div class="marker marker-west">W</div>
        </div>
        
        <!-- 刻度环 -->
        <div class="compass-ring">
          <div 
            v-for="i in 36" 
            :key="i" 
            class="degree-mark"
            :style="{ transform: `rotate(${(i - 1) * 10}deg)` }"
          ></div>
        </div>
      </div>
      
      <!-- 标签 -->
      <div v-if="componentData.props.showLabels" class="compass-labels">
        <div class="label-north">北</div>
        <div class="label-east">东</div>
        <div class="label-south">南</div>
        <div class="label-west">西</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import type { ComponentConfig } from '../../interface'

// Props
interface Props {
  componentData: ComponentConfig
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  update: [component: ComponentConfig]
  delete: [componentId: string]
}>()

// 响应式数据
const rotation = ref(0)
let rotationInterval: number | null = null

// 计算指北针样式
const compassStyle = computed(() => {
  const style = props.componentData.style || {}
  const size = props.componentData.props.compassSize || 60
  
  const computedStyle = {
    width: size + 'px',
    height: size + 'px',
    backgroundColor: style.backgroundColor || 'transparent',
    borderColor: style.borderColor || 'transparent',
    borderWidth: (style.borderWidth || 0) + 'px',
    borderRadius: (style.borderRadius || 0) + 'px',
    opacity: style.opacity !== undefined ? style.opacity : 1,
    boxSizing: 'border-box',
    ...style
  }
  
  console.log('CompassComponent: compassStyle computed, style:', style)
  console.log('CompassComponent: final computedStyle:', computedStyle)
  
  return computedStyle
})

// 自动旋转
const startAutoRotation = () => {
  if (props.componentData.props.autoRotate) {
    rotationInterval = window.setInterval(() => {
      rotation.value = (rotation.value + 1) % 360
    }, 100)
  }
}

const stopAutoRotation = () => {
  if (rotationInterval) {
    clearInterval(rotationInterval)
    rotationInterval = null
  }
}

// 生命周期
onMounted(() => {
  startAutoRotation()
})

onUnmounted(() => {
  stopAutoRotation()
})
</script>

<style lang="scss" scoped>
.compass-component {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  .compass-container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .compass-main {
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid #409eff;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    
    .compass-arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4px;
      height: 70%;
      transform-origin: center;
      transition: transform 0.3s ease;
      
      .arrow-north {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 20px solid #f56c6c;
        font-size: 10px;
        color: white;
        text-align: center;
        line-height: 20px;
      }
      
      .arrow-south {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 20px solid #409eff;
        font-size: 10px;
        color: white;
        text-align: center;
        line-height: 20px;
      }
    }
    
    .direction-markers {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
      .marker {
        position: absolute;
        font-size: 12px;
        font-weight: bold;
        color: #606266;
        
        &.marker-north {
          top: 5px;
          left: 50%;
          transform: translateX(-50%);
        }
        
        &.marker-east {
          top: 50%;
          right: 5px;
          transform: translateY(-50%);
        }
        
        &.marker-south {
          bottom: 5px;
          left: 50%;
          transform: translateX(-50%);
        }
        
        &.marker-west {
          top: 50%;
          left: 5px;
          transform: translateY(-50%);
        }
      }
    }
    
    .compass-ring {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
      .degree-mark {
        position: absolute;
        top: 0;
        left: 50%;
        width: 1px;
        height: 8px;
        background-color: #c0c4cc;
        transform-origin: center;
        
        &:nth-child(3n) {
          height: 12px;
          background-color: #909399;
        }
      }
    }
  }
  
  .compass-labels {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 10px;
    color: #909399;
    
    .label-north {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .label-east {
      position: absolute;
      top: 0;
      right: 0;
    }
    
    .label-south {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .label-west {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  
  // 样式变体
  &.compass-modern {
    .compass-main {
      border-color: #67c23a;
      background: linear-gradient(135deg, #f0f9ff 0%, #d1f2eb 100%);
      
      .compass-arrow .arrow-north {
        border-bottom-color: #67c23a;
      }
      
      .compass-arrow .arrow-south {
        border-top-color: #67c23a;
      }
    }
  }
  
  &.compass-minimal {
    .compass-main {
      border-color: #909399;
      background: #ffffff;
      
      .compass-arrow .arrow-north {
        border-bottom-color: #909399;
      }
      
      .compass-arrow .arrow-south {
        border-top-color: #909399;
      }
      
      .direction-markers .marker {
        color: #909399;
      }
    }
  }
}
</style>
